<script setup>
import { ref, onMounted, onUnmounted } from "vue"

onMounted(() => {
	timer.value = setInterval(() => {
		num.value = Number((num.value + 0.1).toFixed(1))
		if (num.value > 100) {
			num.value = 0
		}
	}, 1000)
})
onUnmounted(() => {
	clearInterval(timer.value)
})
const num = ref(0)
const timer = ref(null)
</script>
<template>
	<div class="span">{{ num }}%</div>
	<div class="main">
		<div class="g-circle"></div>
		<ul class="g-bubbles">
			<li
				v-for="item in Array.from({ length: 8 }, (v, k) => k + 1)"
				:class="`li-${item}`"
				:key="item"></li>
		</ul>
	</div>
</template>
<style scoped lang="scss">
.span {
	font-size: 40px;
	width: 50px;
	position: relative;
	left: 50%;
	top: -5%;
	z-index: 1000;
}
.main {
	$size-before: 200px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	z-index: 100;
	margin-bottom: 50px;
	.g-circle {
		filter: blur(5px);
		&::before {
			content: "";
			display: block;
			width: $size-before;
			height: $size-before;
			background-color: red;
			position: relative;
			top: calc($size-before / 2);
			border-radius: 42% 38% 62% 42%;
			animation: rabat $animation-duration-5 infinite linear;
		}
		&::after {
			$size-after: 180px;
			content: "";
			display: flex;
			justify-content: center;
			align-items: center;
			width: $size-after;
			height: $size-after;
			position: relative;
			// background-color: black;
			top: calc(($size-after * -1) / 2);
			left: 10px;
			border-radius: 50%;
		}
	}
	.g-bubbles {
		width: $size-before;
		height: 40px;
		background-color: red;
		border-radius: 80% 80% 10% 10%;
		filter: blur(5px);
		li {
			display: inline-block;
			border-radius: 50%;
			background-color: red;
		}
		@for $i from 1 through 14 {
			$size-li: 20px;
			$duration: 10s;
			.li-#{$i} {
				@if $i == 1 or $i == 2 {
					width: $size-li;
					height: $size-li;
					transform: translateX(250%);
					animation: upY1 calc($duration / $i) infinite linear;
				} @else if $i == 7 or $i == 8 {
					width: $size-li;
					height: $size-li;
					transform: translateX(-250%);
					animation: upY3 calc($duration / $i) infinite linear;
				} @else {
					width: calc($size-li * 1.5);
					height: calc($size-li * 1.5);
					animation: upY2 calc($duration / $i) infinite linear;
				}
			}
		}
	}
}
@keyframes rabat {
	to {
		transform: rotate(360deg);
	}
}
@keyframes upY1 {
	to {
		transform: translate(250%, -100px);
	}
}
@keyframes upY2 {
	to {
		transform: translate(0, -100px);
	}
}
@keyframes upY3 {
	to {
		transform: translate(-250%, -100px);
	}
}

.example {
	position: relative;
}
</style>
